<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>从PSD转化为HTML</title>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/common.css" />
    <link rel="stylesheet" href="css/index.css" />
  </head>
  <body>
  	<div class="box">
    <!--头部区-->
    <div class="public-header">
      <div class="public-container clearfloat">
        <div class="header-logo">
          <a href="#"></a>
        </div>
        <ul class="header-nav clearfloat">
          <li class="item">
            <a href="#">Our Story</a>
          </li>
          <li class="item">
            <a href="#">Menu</a>
          </li>
          <li class="item">
            <a href="#">Reservations</a>
          </li>
          <li class="item">
            <a href="#">News</a>
          </li>
          <li class="item">
            <a href="#">Rviews</a>
          </li>
        </ul>
      </div>
    </div>
    <!--广告区-->
    <div class="index-banner">
      <div class="index-banner-bg public-container">
        <img src="img/demo1.png" alt="banner" />
      </div>
      <div class="index-banner-text">
        <div class="text-logo"></div>
        <p class="text-info">
          <i class="line line-l"></i>
          <span class="txt">resto restaurant home page website template</span>
          <i class="line line-r"></i>
        </p>
      </div>
    </div>
    <!--menu区-->
    <div class="index-menu">
      <div class="menu-tips">The Menu</div>
      <div class="public-container menu-list">
        <ul class="clearfloat">
          <li class="menu-item clearfloat">
            <a href="#" class="title">
              <h4>Voluptate cillum fugiat.</h4>
              <p class="comment">Cheese,Tomato,Mushrooms,Onions.</p>
            </a>
            <div class="line"></div>
            <div class="price">$50</div>
          </li>
          <li class="menu-item clearfloat">
            <a href="#" class="title">
              <h4>Arcu pede enim justo.</h4>
              <p class="comment">Tuna, Sweetcorn, Cheese.</p>
            </a>
            <div class="line"></div>
            <div class="price">$45</div>
          </li>
          <li class="menu-item clearfloat">
            <a href="#" class="title">
              <h4>Metus varius laoreet.</h4>
              <p class="comment">Chicken, mozzarella cheese, onions.</p>
            </a>
            <div class="line"></div>
            <div class="price">$62</div>
          </li>
          <li class="menu-item clearfloat">
            <a href="#" class="title">
              <h4>Cras dapibussemper nisi.</h4>
              <p class="comment">Pineapple, Minced Beef, Cheese.</p>
            </a>
            <div class="line"></div>
            <div class="price">$32</div>
          </li>
          <li class="menu-item clearfloat">
            <a href="#" class="title">
              <h4>Donec sodales magna.</h4>
              <p class="comment">Tuna, Sweetcorn, Cheese.</p>
            </a>
            <div class="line"></div>
            <div class="price">$25</div>
          </li>
          <li class="menu-item clearfloat">
            <a href="#" class="title">
              <h4>Quam semper libero.</h4>
              <p class="comment">Cheese, tomato, mushrooms, onions.</p>
            </a>
            <div class="line"></div>
            <div class="price">$15</div>
          </li>
          <li class="menu-item clearfloat">
            <a href="#" class="title">
              <h4>Saugue velit cursus.</h4>
              <p class="comment">Pineapple, Minced Beef, Cheese.</p>
            </a>
            <div class="line"></div>
            <div class="price">$30</div>
          </li>
          <li class="menu-item clearfloat">
            <a href="#" class="title">
              <h4>Nam eget dui Etiam.</h4>
              <p class="comment">Chicken, mozzarella cheese, onions.</p>
            </a>
            <div class="line"></div>
            <div class="price">$35</div>
          </li>
        </ul>
      </div>
      <a href="#" class="menu-more-btn">
        <span>load more</span>
        <span>|</span>
        <span class="icon"></span>
      </a>
    </div>
    <!--菜单区一-->
    <div class="public-container index-panel">
      <div class="index-panel-header clearfloat">
        <h3>FEATURED DISHES</h3>
        <div class="line"></div>
        <div class="btn-group">
          <a href="#" class="btn active"></a>
          <a href="#" class="btn"></a>
          <a href="#" class="btn"></a>
          <a href="#" class="btn"></a>
        </div>
      </div>
      <div class="index-panel-body index-food-list">
        <ul class="clearfloat">
          <li class="food-item">
            <a href="#">
              <img class="banner" src="img/demo2.png" />
              <div class="name">
                <span>Fugiat nulla sint</span>
                <span class="price">$30</span>
              </div>
              <div class="star-bar">
                <span class="star"></span>
                <span class="star"></span>
                <span class="star"></span>
                <span class="star"></span>
                <span class="star nostar"></span>
              </div>
            </a>
          </li>
          <li class="food-item">
            <a href="#">
              <img class="banner" src="img/demo22.png" />
              <div class="name">
                <span>Daute irure dolor</span>
                <span class="price">$24</span>
              </div>
              <div class="star-bar">
                <span class="star"></span>
                <span class="star"></span>
                <span class="star"></span>
                <span class="star"></span>
                <span class="star nostar"></span>
              </div>
            </a>
          </li>
          <li class="food-item">
            <a href="#">
              <img class="banner" src="img/demo23.png" />
              <div class="name">
                <span>Officia deserunt mollit</span>
                <span class="price">$60</span>
              </div>
              <div class="star-bar">
                <span class="star"></span>
                <span class="star"></span>
                <span class="star"></span>
                <span class="star"></span>
                <span class="star nostar"></span>
              </div>
            </a>
          </li>
          <li class="food-item">
            <a href="#">
              <img class="banner" src="img/demo24.png" />
              <div class="name">
                <span>Pim minim veniam</span>
                <span class="price">$17</span>
              </div>
              <div class="star-bar">
                <span class="star"></span>
                <span class="star"></span>
                <span class="star"></span>
                <span class="star"></span>
                <span class="star nostar"></span>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <!--菜单区二-->
    <div class="public-container index-panel">
      <div class="index-panel-header clearfloat">
        <h3>THE GALLERY</h3>
        <div class="line"></div>
        <div class="btn-group">
          <a href="#" class="btn active"></a>
          <a href="#" class="btn"></a>
          <a href="#" class="btn"></a>
          <a href="#" class="btn"></a>
        </div>
      </div>
      <div class="index-panel-body index-pics clearfloat">
        <a href="#" class="pic-col pic-col-m">
          <img src="img/demo3.png" alt="美食" />
        </a>
        <div class="pic-col pic-col-s">
          <a class="pic-row"><img src="img/demo4.png" alt="" /></a>
          <a class="pic-row"><img src="img/demo5.png" alt="" /></a>
        </div>
        <a href="#" class="pic-col pic-col-l">
          <img src="img/demo6.png" alt="" />
        </a>
      </div>
    </div>
    <!--尾部区-->
    <div class="public-footer">
      <div class="public-container">
        <div class="footer-col">
          <p>New York Restaurant<br>3926 Anmoore Road<br>New York, NY 10014<br>
            <a href="tel:718-749-1714">718-749-1714</a>
          </p>
        </div>
        <div class="footer-col">
          <p>France Restaurant<br>68, rue de la Couronne<br>75002 PARIS<br>02.94.23.69.56</p>
        </div>
        <div class="footer-col">
          <a href="#">Blog</a>
          <a href="#">Careers</a>
          <a href="#">Privacy Policy</a>
          <a href="#">Contact</a>
        </div>
        <div class="footer-col">
          <div class="footer-logo"></div>
          <div class="footer-info">&copy;All Rights Reserved 2018.<br>Find More at PixelHint.com</div>
        </div>
      </div>
    </div>
    </div>
  </body>
</html>